<template>
	<u-tabbar activeColor="rgba(252, 49, 14, 1)" inactiveColor="rgba(216, 216, 216, 1)" :value="currentTab" @change="tabbarChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
		<u-tabbar-item text="首页">
			<image class="tabIconStyle" slot="active-icon" :src="icon11"></image>
			<image class="tabIconStyle" slot="inactive-icon" :src="icon12"></image>
		</u-tabbar-item>
		<u-tabbar-item text="好物">
			<image class="tabIconStyle" slot="active-icon" :src="icon21"></image>
			<image class="tabIconStyle" slot="inactive-icon" :src="icon22"></image>
		</u-tabbar-item>
		<u-tabbar-item text="会员">
			<image class="tabIconStyle" slot="active-icon" :src="icon31"></image>
			<image class="tabIconStyle" slot="inactive-icon" :src="icon32"></image>
		</u-tabbar-item>
		<u-tabbar-item text="我的">
			<image class="tabIconStyle" slot="active-icon" :src="icon41"></image>
			<image class="tabIconStyle" slot="inactive-icon" :src="icon42"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		props: {
			currentTab: {
				type: Number,
				default: 0,
				required: true,
			},
		},
		data() {
			return {
				icon11: '/static/pictures/tab1_ac.png',
				icon12: '/static/pictures/tab1.png',
				icon21: '/static/pictures/tab2_ac.png',
				icon22: '/static/pictures/tab2.png',
				icon31: '/static/pictures/tab3_ac.png',
				icon32: '/static/pictures/tab3.png',
				icon41: '/static/pictures/tab4_ac.png',
				icon42: '/static/pictures/tab4.png',
			};
		},
		methods: {
			tabbarChange(name) {
				let url = ''
				switch (name) {
					case 0:
						url = '/pages/index/index'
						break;
					case 1:
						url = '/pages/goodItem/index'
						break;
					case 2:
						url = '/pages/member/index'
						break;
					case 3:
						url = '/pages/mine/index'
						break;
				}
				if (url != '') {
					uni.redirectTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.tabIconStyle {
		width: 20px;
		height: 20px;
	}

	/* #ifndef APP-PLUS-NVUE */
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('~@/static/uview/example/text-icon.ttf') format('truetype');
	}

	page {
		background-color: #f8f8f8;
	}

	/* #endif*/

	/* 解决头条小程序字体图标不显示问题，因为头条运行时自动插入了span标签，且有全局字体 */
	/* #ifdef MP-TOUTIAO */
	text :not(view) {
		font-family: texticons;
	}

	/* #endif */

	.center {
		flex: 1;
		flex-direction: column;
		background-color: #f8f8f8;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		background-color: #2F85FC;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}

	.go-login-navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-left: 20upx;
	}

	.center-list {
		flex-direction: column;
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
	}

	.center-list-item {
		height: 90upx;
		width: 750upx;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #2F85FC;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
</style>
